<template>
    <div>
        <div class="tree-bar aside white-block tree1">
            <scroll-bar ref="treeBar" class="treeBar" :wrapStyle.sync="sidebarStyle">
                <el-tree :data="data1" :props="defaultProps" :load="loadNode" :lazy="true" :expand-on-click-node="false"
                         @node-click="checkChange" :default-expanded-keys="[1]" :current-node-key="1"
                         @node-expand="checkChange1($event,'treeBar')" @node-collapse="checkChange1($event,'treeBar')"
                         :highlight-current="true" node-key="id" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                        <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                        <span class="el-tree-node__label">{{ data.name }}</span>
                        <span
                            class="el-tree-node__label">{{ data.haschildren == 0 ? '' : ' (' + data.count + ') ' }}</span>
                    </span>
                </el-tree>
            </scroll-bar>
        </div>
        <div class="main">
            <div class="content-top white-block" v-if="proFlag">
                <breadcrumb :title="'目录管理'">
                    <div class="text-right">
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="visible=true">新增子目录
                        </el-link>
                        <el-link type="primary limit" size="medium" :underline="false" @click="dirMigration = true"
                                 v-if="directoryMigration" class="second catalogue">目录迁移
                        </el-link>
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="delTreeSer"
                                 v-if="directoryDeletion">目录删除
                        </el-link>
                    </div>
                </breadcrumb>
                <div class="toolbar">
                    <div class="current provider">
                        <span>当前目录名：</span>
                        <el-input v-model="currentTreeInput" v-if="inputBox"></el-input>
                        <el-input v-model="currentTreeInput" :disabled="true" v-if="disinputBox"></el-input>
                        <el-button type="primary limit" size="medium" @click="update1" v-if="serUpdate">编辑</el-button>
                    </div>
                </div>
            </div>
            <div class="message  white-block mt10" v-if="proFlag">
                <breadcrumb :title="'服务信息'"></breadcrumb>
                <div class="toolbar">
                    <div class="provider">
                        <el-select v-model="value" placeholder="请选择" class="select">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="input" placeholder="请输入" class="input" @keyup.enter="pageData(1)"></el-input>
                        <el-button type="primary" @click="pageData(1)">查询</el-button>
                    </div>
                    <div class="text-right">
                        <el-button type="primary" @click="newSystem=true">新建</el-button>
                    </div>
                </div>
                <div class="table atomicTable">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   @row-click="handleClick" @cell-mouse-enter="handClick"
                                   v-loading="loading"
                                   :highLight="true"
                                   @tabCurrentChange="tabCurrentChangeDetails"
                                   class="mt20">
                        <template slot="status" slot-scope="scope">
                            <span v-if="Number(scope.row.status) == 1">在用</span>
                            <span v-if="Number(scope.row.status) == 0">注销</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <!--                            <el-link type="primary" :underline="false" @click="del">删除</el-link>-->
                                <!--                            <el-link type="primary" :underline="false" @click="details">详情</el-link>-->
                                <el-link type="primary" :underline="false"
                                         @click.stop
                                         @click="migration(scope.row.treeId)">迁移
                                </el-link>
                            </div>

                        </template>
                    </table-example>
                    <page :data="page" v-if="page" class="mt30 page" @jumpPage="pageData"></page>
                </div>

            </div>
            <el-container v-if="flag">
                <el-header height="auto">
                    <!--  系统详情-->
                    <div class="white-block system-details" v-if="flag">
                        <breadcrumb :title="'服务信息'">
                            <el-button type="primary" @click="updateSystemClick">编辑</el-button>
                        </breadcrumb>
                        <div class="sysDet">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">服务名称：</span>
                                        <el-tooltip class="item" effect="dark"
                                                    :content="sysMsgDet.servname" placement="top">
                                            <span class="serviceContent">{{sysMsgDet.servname}}</span>
                                        </el-tooltip>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">服务编码：</span>
                                        <el-tooltip class="item" effect="dark"
                                                    :content="sysMsgDet.servcode" placement="top">
                                            <span class="serviceContent">{{sysMsgDet.servcode}}</span>
                                        </el-tooltip>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">版本：</span>
                                        <span class="sysContenrt">{{sysMsgDet.servversion}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">超时时间(ms)：</span>
                                        <span class="sysContenrt">{{sysMsgDet.overTime}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">原子服务编码：</span>
                                        <span class="sysContenrt">{{sysMsgDet.atomcode}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple sysMsg">
                                        <span class="sysTitle">状态：</span>
                                        <!--                                this.sysMsgDet.status-->
                                        <span class="sysContenrt" v-if=" this.sysMsgDet.status ==''"></span>
                                        <span class="sysContenrt" v-if="this.sysMsgDet.status =='1'">在用</span>
                                        <span class="sysContenrt" v-if="this.sysMsgDet.status =='0'">注销</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <tabs-bar v-if="flag" @switchClick="tabClick" :value.sync="currentValue">
                        <tab-pane label="服务消费者信息" name="1" class="pane">
                            <div class="paneChild tabsHeight">
                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'用户访问服务控制'" class="breadcrumb"></breadcrumb>
                                    </div>
                                    <el-link type="primary" class="ml20 add" @click="addUser" :underline="false">
                                        添加
                                    </el-link>
                                </div>
                                <div class="tableWidth">
                                    <table-example :data="userTableData" :tableColumn="userHeader"
                                                   :slotColumns="userSlotColumns" maxHeigth="240">
                                        <template slot="userOperation" slot-scope="scope">
                                            <div class="operation">
                                                <el-link :underline="false" @click="modifyUser(scope.row)"
                                                         type="primary"
                                                         size="small">编辑
                                                </el-link>
                                                <el-link :underline="false" @click="deleteUser(scope.row)"
                                                         type="primary"
                                                         size="small">删除
                                                </el-link>
                                            </div>
                                        </template>
                                    </table-example>
                                </div>

                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'用户IP授权信息'" class="breadcrumbT"></breadcrumb>
                                    </div>
                                    <div class="addInput">
                                        <!-- <el-input v-model="Ipinput" placeholder="请输入IP地址">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="queryUserIPData"></i>
                                        </el-input> -->
                                        <el-input placeholder="请输入IP地址" v-model="Ipinput">
                                            <i slot="suffix" class="el-input__icon el-icon-search"
                                               @click="queryUserIPData"></i>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="tableWidth">
                                    <table-example :data="userIPTableData" :tableColumn="userIPHeader"
                                                   :slotColumns="userIPSlotColumns" maxHeigth="240"
                                                   class="mt20">
                                        <template slot="userIPOperation" slot-scope="scope" class="text-center">
                                            <div class="operation">
                                                <el-link :underline="false" @click="authorization(scope.row)"
                                                         type="primary"
                                                         size="small" v-if="scope.row.status===0">授权
                                                </el-link>
                                                <el-link :underline="false" @click="cancelAuthorization(scope.row)"
                                                         type="danger"
                                                         size="small" v-else>取消授权
                                                </el-link>
                                            </div>
                                        </template>
                                    </table-example>
                                </div>
                            </div>
                        </tab-pane>
                        <tab-pane label="服务接入信息" name="2" class="pane">
                            <div class="paneChild tabsHeight">
                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'服务接入信息'" class="breadcrumb breadcrumbB"></breadcrumb>
                                    </div>
                                    <el-link type="primary" class="ml20 add" @click="accessDialog"
                                             :underline="false">编辑
                                    </el-link>
                                </div>
                                <el-row :gutter="20" v-if="HTTPForm.type == 1">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">服务接入类型：</span>
                                            <span>HTTP</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type ==1">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">请求类型：</span>
                                            <span>{{HTTPForm.typeValue === 2 ? 'POST' : 'GET'}}</span>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20" v-if="HTTPForm.type == 2">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">服务接入类型：</span>
                                            <span>WEBSERVICE</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 2">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">目标地址：</span>
                                            <span>{{webValue.endpoint}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 2">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">ServiceName：</span>
                                            <span>{{webValue.servicename}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 2">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">PortName：</span>
                                            <span>{{webValue.portname}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 2">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">方法名：</span>
                                            <span>{{webValue.operationname}}</span>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20" v-if="HTTPForm.type == 3">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">服务接入类型：</span>
                                            <span>H5</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 3">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">目标地址：</span>
                                            <span>{{H5Value.targetaddress}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 3">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">工程路径：</span>
                                            <span>{{H5Value.projectpath}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="HTTPForm.type == 3">
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">返回类型：</span>
                                            <span>{{H5Value.returnValue === 'H' ? 'HTML页面' : '图片'}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </tab-pane>
                        <tab-pane label="部署信息" name="3" class="pane">
                            <div class="paneChild tabsHeight">
                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'部署信息'" class="breadcrumb breadcrumbB"></breadcrumb>
                                    </div>
                                    <el-link type="primary" class="ml20 add" @click="saveDeployment"
                                             :underline="false">保存部署信息
                                    </el-link>
                                </div>
                                <div>
                                    <el-row>
                                        <el-col :span="6" class="mb40 mt20" v-for="(item, index) in deployData"
                                                :key="index">
                                            <div class="block ml60">
                                                <el-image style="width: 1rem; height: 1rem"
                                                          :src="item.deploySrc"></el-image>
                                                <div class="ml20 mt10">
                                                    <div class="ib mr10">
                                                        <el-checkbox v-model="item.checked"
                                                                     :disabled='item.disabled'></el-checkbox>
                                                    </div>
                                                    <div class="ib">
                                                        <div class="demonstration">{{item.app}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </tab-pane>
                        <tab-pane label="参数配置" name="4" class="pane">
                            <div class="paneChild tabsHeight">
                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'接口入参信息'" class="breadcrumb"></breadcrumb>
                                    </div>
                                    <el-link type="primary" class="add" @click="addImportInfo()" :underline="false">
                                        添加
                                    </el-link>
                                </div>
                                <div class="tableWidth">
                                    <table-example :data="importInfoTableData" :tableColumn="importInfoHeader"
                                                   :slotColumns="importInfoSlotColumns" maxHeigth="240">
                                        <template slot="num" slot-scope="scope">
                                            {{scope.$index+1}}
                                        </template>
                                        <template slot="paramType" slot-scope="scope">
                                            <span v-for="(item, i) in infoTypeOptions" :key="i"
                                                  v-if="item.value==scope.row.paramType">{{item.label}}</span>
                                        </template>
                                        <template slot="paramFormat" slot-scope="scope">
                                            <span v-for="(item, i) in infoFormatOptions" :key="i"
                                                  v-if="item.value==scope.row.paramFormat">{{item.label}}</span>
                                        </template>
                                        <template slot="nodeType" slot-scope="scope">
                                            <span v-for="(item, i) in infoNodeTypeOptions" :key="i"
                                                  v-if="item.value==scope.row.nodeType">{{item.label}}</span>
                                        </template>
                                        <template slot="operation" slot-scope="scope">
                                            <div class="operation">
                                                <el-link :underline="false" @click="addImportInfo(scope.row)"
                                                         type="primary"
                                                         size="small">编辑
                                                </el-link>
                                                <el-link :underline="false" @click="delImportInfo(scope.row)"
                                                         type="primary"
                                                         size="small">删除
                                                </el-link>
                                            </div>
                                        </template>
                                    </table-example>
                                </div>

                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'接口出参信息'" class="breadcrumbT"></breadcrumb>
                                    </div>
                                    <div class="add">
                                        <el-select v-model="exportType" ref="select"
                                                   placeholder="请选择数据类型">
                                            <el-option
                                                v-for="item in responseDataTypeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :disabled="responseDataTypeDisable(item)"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-link type="primary" class="ml20" @click="addExportInfo()"
                                                 :underline="false">
                                            添加
                                        </el-link>
                                    </div>
                                </div>
                                <div class="tableWidth">
                                    <table-example :data="exportInfoTableData" :tableColumn="exportInfoHeader"
                                                   :slotColumns="exportInfoSlotColumns" maxHeigth="240"
                                                   class="mt20">
                                        <template slot="num" slot-scope="scope">
                                            {{scope.$index+1}}
                                        </template>
                                        <template slot="nodeType" slot-scope="scope">
                                            <span v-for="(item, i) in infoNodeTypeOptions" :key="i"
                                                  v-if="item.value==scope.row.nodeType">{{item.label}}</span>
                                        </template>
                                        <template slot="responseDataType" slot-scope="scope">
                                            <span v-for="(item, i) in responseDataTypeOptions" :key="i"
                                                  v-if="item.value==scope.row.responseDataType">{{item.label}}</span>
                                        </template>
                                        <template slot="operation" slot-scope="scope">
                                            <div class="operation">
                                                <el-link :underline="false" @click="addExportInfo(scope.row)"
                                                         type="primary"
                                                         size="small">编辑
                                                </el-link>
                                                <el-link :underline="false" @click="delExportInfo(scope.row)"
                                                         type="primary"
                                                         size="small">删除
                                                </el-link>
                                            </div>
                                        </template>
                                    </table-example>
                                </div>
                            </div>
                        </tab-pane>
                        <tab-pane label="脚本配置" name="5" class="pane">
                            <div class="paneChild tabsHeight">
                                <div class="positionR">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'脚本配置'" class="breadcrumb breadcrumbB"></breadcrumb>
                                    </div>
                                    <el-link type="primary" class="ml20 add" @click="scriptDialog"
                                             :underline="false">
                                        <template v-if="scriptConf">编辑</template>
                                        <template v-else>新增</template>
                                    </el-link>
                                </div>
                                <el-row :gutter="20" v-if="scriptConf">
                                    <el-col :span="24">
                                        <div class="grid-content bg-purple sysMsg ml20">
                                            <span class="sysTitle">接口处理脚本：</span>
                                            <span>{{scriptConf.name}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </tab-pane>
                    </tabs-bar>
                </el-main>
            </el-container>
        </div>

        <!-- 添加开始 -->
        <dialog-msk :show.sync="addConsumers" :title="'添加服务消费者'" :noEsc="false" :noModal="false">
            <span slot="footer" class="dialog-footer">
                <span slot="footer">
                    <el-button @click="addConsumersClose">取 消</el-button>
                    <el-button type="primary" @click="saveAddConsumers">保 存</el-button>
                </span>
            </span>
            <div>
                <el-form label-width="30%">
                    <el-form-item label="选择消费者">
                        <select-tree :lazy="true"
                                     :showSearch="false"
                                     :model.sync="addConsumersModel"
                                     @loadNode="addLoadNode"
                                     @nodeClick="addConsumersNodeClick"
                                     :props="addConsumersprops"
                                     :options="addConsumersOptions"
                                     class="openWay" v-if="addConsumers">
                        </select-tree>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <!-- 添加结束 -->
        <!-- 修改开始 -->
        <dialog-msk :show.sync="modifyConsumers" :center="true" :title="'编辑服务消费者'" :width="'6rem'" :noEsc="false"
                    :noModal="false"
                    @cancel="modifyCancel">
            <span slot="footer" class="dialog-footer">
                <span slot="footerfooter">
                    <el-button @click="modifyConsumersClose">取 消</el-button>
                    <el-button type="primary" @click="saveModifyConsumers">保 存</el-button>
                </span>
            </span>
            <div>
                <el-form label-width="35%" :model="userModifyTableData" :rules="modifyFormRules" ref="modifyFormRef">
                    <el-form-item label="选择消费者" prop="systemName">
                        <el-select placeholder="请选择" v-model="userModifyTableData.systemName" :disabled="true">
                            <el-option value="userModifyTableData"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最大连接数" prop="maxclient">
                        <el-input v-model="userModifyTableData.maxclient" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="并发数控制时间(ms)" prop="unit1">
                        <el-input v-model="userModifyTableData.unit1" placeholder="请输入" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="单位时间最大请求" prop="reqFrequency">
                        <el-input v-model="userModifyTableData.reqFrequency" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <!-- 修改结束 -->
        <!-- 服务接入信息弹框 -->
        <dialog-msk :show.sync="access" ref="accessRef" :title="'服务接入信息'" :noEsc="false" @cancel="accessCancelTree"
                    :width="'6rem'"
                    :noModal="false">
            <span slot="footer" class="dialog-footer">
                <span slot="footer">
                    <el-button @click="access=false">取 消</el-button>
                    <el-button type="primary" @click="saveAccess">保 存</el-button>
                </span>
            </span>
            <div>
                <div class="serviceType">选择服务接入类型:</div>
                <el-card class="box_shadow">
                    <el-tabs v-model="activeName" @tab-click="changeTabs">
                        <el-tab-pane label="HTTP" name="1">
                            <el-form class="HTTPSelect" label-width="40%" ref="HTTPFormRef" :model="HTTPForm"
                                     :rules="HTTPFormRules">
                                <el-form-item label="请求类型：" prop="typeValue">
                                    <el-select placeholder="请选择" v-model="HTTPForm.typeValue">
                                        <el-option
                                            v-for="item in HTTPForm.typeOptions"
                                            :key="item.typeValue"
                                            :label="item.label"
                                            :value="item.typeValue"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="WEBSERVICE" name="2">
                            <el-form class="WEBSelect" label-width="35%" ref="webFormRef" :model="webValue"
                                     :rules="webFormRules">
                                <el-form-item label="目标地址：" prop="endpoint">
                                    <el-input v-model="webValue.endpoint" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="ServiceName：" prop="servicename">
                                    <el-input v-model="webValue.servicename" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="PortName：" prop="portname">
                                    <el-input v-model="webValue.portname" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="方法名：" prop="operationname">
                                    <el-input v-model="webValue.operationname" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="H5" name="3">
                            <el-form class="H5Select" label-width="30%" ref="H5FormRef" :model="H5Value"
                                     :rules="H5FormRules">
                                <el-form-item label="目标地址：" prop="targetaddress">
                                    <el-input v-model="H5Value.targetaddress" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="工程路径：" prop="projectpath">
                                    <el-input v-model="H5Value.projectpath" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="返回类型：" prop="returnValue">
                                    <el-select placeholder="请选择" v-model="H5Value.returnValue">
                                        <el-option
                                            v-for="item in H5Value.returnOptions"
                                            :key="item.returnValue"
                                            :label="item.label"
                                            :value="item.returnValue"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </div>
        </dialog-msk>

        <!--  新增子节点弹框-->
        <dialog-msk :show.sync="visible" ref="dialog" :center="true" :noEsc="false" :noModal="false" :title="'新增子目录'"
                    @save="addTree"
                    @cancel="close">
            <div>
                <el-form ref="form" :model="ruleForm" :rules="rules" label-width="110px">
                    <el-form-item label="新增子目录" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <!--  新建系统弹框-->
        <dialog-msk :show.sync="newSystem" ref="dialog1" :center="true" :noEsc="false" :noModal="false" :width="'7rem'"
                    :title="'新建服务'"
                    @save="addSystemSer" @cancel="addClose">
            <div>
                <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="120px">
                    <el-form-item label="服务名称" prop="name">
                        <el-input v-model="addForm.name" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="服务编码" prop="code">
                        <el-input v-model="addForm.code" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="版本" prop="edition">
                        <el-input v-model="addForm.edition" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="超时时间(ms)" prop="time">
                        <el-input v-model="addForm.time" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <!--                        <el-input v-model="form.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="workingstatusVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in workingstatus"
                                :key="item.workingstatusVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>
        <!--  修改系统弹框-->
        <dialog-msk :show.sync="updateSystemFlag" ref="dialog1" :noEsc="false" :noModal="false" :center="true"
                    :width="'7rem'" :title="'编辑'"
                    @save="updateSystemSave" @cancel="closeUpdateSystemDet">
            <div>
                <el-form ref="upDateSysMsg" :model="sysMsg" :rules="sysMsgRules" label-width="120px">
                    <el-form-item label="服务名称" prop="servname">
                        <el-input v-model="sysMsg.servname"></el-input>
                    </el-form-item>
                    <el-form-item label="服务编码" prop="servcode">
                        <el-input v-model="sysMsg.servcode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="版本" prop="servversion">
                        <el-input v-model="sysMsg.servversion"></el-input>
                    </el-form-item>
                    <el-form-item label="超时时间(ms)" prop="overTime">
                        <el-input v-model="sysMsg.overTime"></el-input>
                    </el-form-item>
                    <el-form-item label="原子服务编码" prop="atomcode">
                        <el-input v-model="sysMsg.atomcode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--                        <el-input v-model="sysMsg.status"></el-input>-->
                        <el-select v-model="workingstaVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in workingsta"
                                :key="item.workingstaVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!--                    <el-form-item class="btn">-->
                    <!--                        <el-button type="primary" @click="onSubmit">保存</el-button>-->
                    <!--                        <el-button @click="del">删除</el-button>-->
                    <!--                    </el-form-item>-->
                </el-form>
            </div>
        </dialog-msk>

        <!--  节点迁移弹框-->
        <dialog-msk :show.sync="nodeMigration" ref="dialog" :center="true" :noEsc="false" :noModal="false"
                    :title="'节点迁移'" @save="save" @cancel="close">
            <div>
                <div class="tree treeBar">
                    <el-tree :data="nodeData" :props="defaultProps" :load="loadNode1" :lazy="true"
                             :expand-on-click-node="false"
                             @node-click="checkChange2" :default-expanded-keys="[1]"
                             @node-expand="checkChange1" @node-collapse="checkChange1"
                             :highlight-current="true" node-key="id" ref="tree1">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                            <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                            <span class="el-tree-node__label">{{ data.name }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </dialog-msk>
        <!--  目录迁移-->
        <dialog-msk :show.sync="dirMigration" ref="dialog" :center="true" :noEsc="false" :noModal="false"
                    :title="'目录迁移'" @save="save1" @cancel="close">
            <div>
                <div class="tree treeBar">
                    <el-tree :data="directoryData" :props="defaultProps" :load="loadNode2" :lazy="true"
                             :expand-on-click-node="false"
                             @node-click="checkChange2" :default-expanded-keys="[1]"
                             @node-expand="checkChange1" @node-collapse="checkChange1"
                             :highlight-current="true" node-key="id" ref="tree1">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                            <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                            <span class="el-tree-node__label">{{ data.name }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </dialog-msk>

        <!-- 新增&修改接口入参信息弹框 -->
        <dialog-msk :show.sync="editImportInfo" ref="importInfoDialog" :center="true" :noEsc="false" :noModal="false"
                    :width="'7rem'"
                    :title="'添加接口入参信息'"
                    @save="importInfoSave" @cancel="importInfoClose">
            <div>
                <el-form ref="importInfoForm" :model="importInfoForm" :rules="importInfoRules" label-width="120px">
                    <el-form-item label="参数格式" prop="paramFormat">
                        <el-select v-model="importInfoForm.paramFormat" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoFormatOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="参数类型" prop="paramType">
                        <el-select v-model="importInfoForm.paramType" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="参数值" prop="paramValue" v-if="importInfoForm.paramType==2">
                        <el-input v-model="importInfoForm.paramValue" placeholder="请输入参数值"></el-input>
                    </el-form-item>

                    <el-form-item label="参数名" prop="paramKey">
                        <el-input v-model="importInfoForm.paramKey" placeholder="请输入参数名，30字内"></el-input>
                    </el-form-item>

                    <el-form-item label="父节点" v-if="importInfoForm.paramFormat==3" prop="parentOrderNum">
                        <!--                        <el-input v-model="form.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="importInfoForm.parentOrderNum" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoParentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="节点类型" prop="nodeType" v-if="importInfoForm.paramFormat==3">
                        <el-select v-model="importInfoForm.nodeType" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoNodeTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参数含义" prop="paramName">
                        <el-input v-model="importInfoForm.paramName" placeholder="请输入参数含义，30字内"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>
        <!-- 新增&修改接口出参信息弹框 -->
        <dialog-msk :show.sync="editExportInfo" ref="exportInfoDialog" :center="true" :noEsc="false" :noModal="false"
                    :width="'7rem'"
                    :title="'添加接口出参信息'"
                    @save="exportInfoSave" @cancel="exportInfoClose">
            <div>
                <el-form ref="exportInfoForm" :model="exportInfoForm" :rules="exportInfoRules" label-width="120px">
                    <el-form-item label="参数名" prop="paramKey">
                        <el-input v-model="exportInfoForm.paramKey" placeholder="请输入参数名，30字内"></el-input>
                    </el-form-item>

                    <el-form-item label="父节点" prop="parentOrderNum">
                        <!--                        <el-input v-model="form.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="exportInfoForm.parentOrderNum" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoParentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="节点类型" prop="nodeType">
                        <el-select v-model="exportInfoForm.nodeType" placeholder="请选择" class="full">
                            <el-option
                                v-for="item in infoNodeTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参数含义" prop="paramName">
                        <el-input v-model="exportInfoForm.paramName" placeholder="请输入参数含义，30字内"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!-- 新增&修改接口出参信息弹框 -->
        <dialog-msk :show.sync="scriptInfo" ref="scriptInfoDialog" :center="true" :noEsc="false" :noModal="false"
                    :width="'6rem'"
                    :title="'脚本配置'"
                    @save="scriptSave" @cancel="scriptClose">
            <div class="script-info">
                <div class="search">
                    <el-input v-model="scriptKey" placeholder="请输入脚本名称" clearable></el-input>
                    <el-button type="primary" @click="getScriptList">搜索</el-button>
                </div>
                <div class="list mt10" v-if="scriptList[0]">
                    <div v-for="(item, index) in scriptList" :key="index" class="ellipsis"
                         :class="{active: item.checked}" @click="scriptClick(item)">
                        <div class="icon">
                            <i class="el-icon-check" v-if="item.checked"></i>
                        </div>
                        <el-checkbox v-model="item.checked" @click.stop.native
                                     @change="scriptChange(item)"></el-checkbox>
                        <span :title="item.name">{{item.name}}</span>
                    </div>
                </div>
                <div class="empty mt10" v-if="!scriptList[0]">暂无脚本</div>
            </div>
        </dialog-msk>

    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import scrollBar from '@/components/scrollbar'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import selectTree from '../../components/select-tree'
    import tabsBar from '../../components/tabs'

    export default {
        data() {
            let patter = /^[0-9a-zA-Z.]+$/,
                code = (rule, value, callback) => {
                    if (!patter.test(value)) {
                        return callback(new Error('只能出现"."或者数字或者字母'))
                    } else {
                        callback()
                    }
                },
                english = /^[a-zA-Z]+$/,
                en = (rule, value, callback) => {
                    if (!english.test(value)) {
                        return callback(new Error('只能出现字母'))
                    } else {
                        callback()
                    }
                },
                num = /^[0-9]*$/,
                number = (rule, value, callback) => {
                    if (!num.test(value)) {
                        return callback(new Error('只能出现数字'))
                    } else {
                        callback()
                    }
                },
                num1 = /^[0-9.]*$/,
                number1 = (rule, value, callback) => {
                    if (!num1.test(value)) {
                        return callback(new Error('只能出现数字或者"."'))
                    } else {
                        callback()
                    }
                }
            return {
                currentValue: '1',
                sidebarStyle: null,
                input: '',
                loading: false,
                currentPage: 1,
                tableData: [],
                header: [
                    {
                        prop: 'servname',
                        label: '服务名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servcode',
                        label: '服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servversion',
                        label: '版本',
                        minWidth: 70,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomcode',
                        label: '原子服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'updateTime',
                        label: '更新时间',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center',
                        tooltip: true,
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'status'],
                data1: null, // 左边树
                nodeData: null, // 迁移节点
                directoryData: null, // 迁移目录
                page: null,
                update: null,
                title: '',
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ]

                },
                addRules: {
                    name: [
                        {required: true, message: '请输入服务名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入服务编码', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
                        {validator: code}
                    ],
                    edition: [
                        {required: true, message: '请输入服务版本', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number1}
                    ],
                    time: [
                        {required: true, message: '请输入超时时间', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                sysMsgRules: {
                    servname: [
                        {required: true, message: '服务名称不能为空', trigger: 'blur'},
                        {min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur'}
                    ],
                    servversion: [
                        {required: true, message: '服务版本不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number1}
                    ],
                    overTime: [
                        {required: true, message: '超时时间不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                ruleForm: {
                    name: '',
                    type: 0
                },
                currentTree: null,
                currentTree1: null,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: function (data, node) {
                        if (!data.haschildren) return true
                    }
                },
                firstDeptList: null,
                highlightCurrent: false,
                defaultExpandAll: false,
                newSystem: false,
                visible: false,
                nodeMigration: false, // 节点迁移弹框
                dirMigration: false, // 目录迁移弹框
                addForm: {
                    id: '',
                    name: '',
                    code: '',
                    edition: '',
                    status: '',
                    time: ''
                },
                sysMsg: {},
                options: [
                    {
                        value: '1',
                        label: '服务名称'
                    },
                    {
                        value: '2',
                        label: '服务编码'
                    }
                ],
                value: '1',
                workingstatus: [
                    {
                        value: '1',
                        label: '在用'
                    },
                    {
                        value: '0',
                        label: '注销'
                    }
                ], // 状态
                workingsta: [
                    {
                        value: '1',
                        label: '在用'
                    },
                    {
                        value: '0',
                        label: '注销'
                    }
                ],
                workingstatusVal: '1', // 状态
                workingstaVal: '',
                index: 1,
                id: '',
                flag: false,
                proFlag: true, // 接口服务信息
                consumers: false, // 服务消费者信息弹框
                addConsumers: false, // 添加服务消费者信息弹框
                modifyConsumers: false, // 修改服务消费者信息弹框
                addConsumersOptions: [],
                addConsumersModel: {
                    value: '',
                    label: ''
                },
                addConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.haschildren) return true
                    }
                },
                addConsumersId: '',
                userModifyTableData: {
                    systemName: '',
                    maxclient: '',
                    unit1: '',
                    reqFrequency: ''
                },
                modifyFormRules: {
                    systemName: [{required: true, message: '请选择消费者', trigger: 'change'}],
                    maxclient: [
                        {required: true, message: '请输入最大连接数', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度不超过10', trigger: 'blur'},
                        {validator: number}
                    ],
                    unit1: [
                        {required: true, message: '请输入并发数控制时间', trigger: 'blur'}
                    ],
                    reqFrequency: [
                        {required: true, message: '请输入单位时间最大请求', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度不超过10', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                userCurrentPage: 1,
                userSize: 1000,
                Ipinput: '',
                userTableData: [],
                userSlotColumns: ['userOperation', 'userIPOperation'],
                userpage: null,
                userHeader: [
                    {
                        prop: 'systemName',
                        label: '消费者名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'maxclient',
                        label: '最大连接数',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'unit1',
                        label: '并发数控制时间(ms)',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'reqFrequency',
                        label: '单位时间最大请求',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'userOperation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                userIPTableData: [],
                userIPCurrentPage: 1,
                userIPSize: 50,
                userIPHeader: [
                    {
                        prop: 'systemName',
                        label: '消费者系统名称',
                        minWidth: 150,
                        headerAlign: 'left',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'groupname',
                        label: '群组名称',
                        minWidth: 150,
                        headerAlign: 'left',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'ip',
                        label: 'IP地址',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'userIPOperation',
                        label: '操作',
                        minWidth: 80,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ],
                userIPpage: null,
                userIPSlotColumns: ['userIPOperation'],
                access: false, // 服务接入信息弹框
                activeName: '1',
                HTTPForm: {
                    typeOptions: [
                        {
                            typeValue: 1,
                            label: 'GET'
                        },
                        {
                            typeValue: 2,
                            label: 'POST'
                        }
                    ], // WEBSERVICE   select
                    typeValue: null
                },
                HTTPFormRules: {
                    typeValue: [
                        {required: true, message: '请选择返回类型', trigger: 'change'}
                    ]
                },
                webValue: {
                    endpoint: '',
                    servicename: '',
                    portname: '',
                    operationname: ''
                },
                webFormRules: {
                    endpoint: [
                        {required: true, message: '请输入目标地址', trigger: 'blur'},
                        {pattern: /(http|https):\/\/([\w.]+\/?)\S*/, message: '请输入有效地址', trigger: 'blur'}
                    ],
                    servicename: [
                        {required: true, message: '请输入ServiceName', trigger: 'blur'},
                        {validator: en}
                    ],
                    portname: [
                        {required: true, message: '请输入PortName', trigger: 'blur'},
                        {validator: en}
                    ],
                    operationname: [
                        {required: true, message: '请输入方法名', trigger: 'blur'},
                        {validator: code}
                    ]
                },
                H5Value: {
                    targetaddress: '',
                    projectpath: '',
                    returnOptions: [
                        {
                            returnValue: 'H',
                            label: 'HTML页面'
                        },
                        {
                            returnValue: 'P',
                            label: '图片'
                        }
                    ],
                    returnValue: ''
                },
                H5FormRules: {
                    targetaddress: [
                        {required: true, message: '请输入目标地址', trigger: 'blur'},
                        {pattern: /(http|https):\/\/([\w.]+\/?)\S*/, message: '请输入有效地址', trigger: 'blur'}
                    ],
                    projectpath: [
                        {required: true, message: '请输入工程路径', trigger: 'blur'},
                        {pattern: /(http|https):\/\/([\w.]+\/?)\S*/, message: '请输入有效地址', trigger: 'blur'}
                    ],
                    returnValue: [
                        {required: true, message: '请选择返回类型', trigger: 'change'}
                    ]
                },
                deployData: [], // 部署信息弹框
                deploy: false,
                deploytype: 0,
                directoryDeletion: false,
                serUpdate: false,
                directoryMigration: false,
                node_had: null,
                resolve_had: null,
                currentRowDetails: null,
                currentTreeInput: '',
                updateSystemFlag: false,
                sysMsgDet: {},
                inputBox: false,
                disinputBox: true,
                // tabApi: ['服务消费者信息', '服务接入信息', '部署信息'],
                // tabsIndex: 0,
                inputbox: '',
                exportType: '', // 接口出参数据类型
                editImportInfo: false, // 接口入参信息弹窗是否显示
                editExportInfo: false, // 接口出参信息弹窗是否显示
                importInfoForm: {
                    nodeType: '', // 节点类型
                    paramFormat: '', // 参数格式
                    paramValue: '', // 参数值
                    paramKey: '', // 参数名
                    parentOrderNum: '', // 父节点
                    paramName: '', // 参数含义
                    paramType: 1 // 参数类型
                },
                importInfoRules: {
                    paramFormat: [
                        {required: true, message: '请选择参数格式', trigger: 'change'}
                    ],
                    paramType: [
                        {required: true, message: '请选择参数类型', trigger: 'change'}
                    ],
                    paramValue: [
                        {required: true, message: '请输入参数值', trigger: 'blur'}
                    ],
                    paramKey: [
                        {max: 30, message: '超过30个字', trigger: 'blur'}
                    ],
                    paramName: [
                        {max: 30, message: '超过30个字', trigger: 'blur'}
                    ],
                    nodeType: [
                        {required: true, message: '请选择节点类型', trigger: 'change'}
                    ]
                },
                exportInfoForm: {
                    nodeType: '', // 节点类型
                    paramKey: '', // 参数名
                    parentOrderNum: '', // 父节点
                    paramName: '' // 参数含义
                },
                exportInfoRules: {
                    paramKey: [
                        {max: 30, message: '超过30个字', trigger: 'blur'}
                    ],
                    paramName: [
                        {max: 30, message: '超过30个字', trigger: 'blur'}
                    ],
                    nodeType: [
                        {required: true, message: '请选择节点类型', trigger: 'change'}
                    ]
                },
                infoFormatOptions: [
                    {
                        label: '地址栏参数',
                        value: 1
                    },
                    {
                        label: 'head参数',
                        value: 2
                    },
                    {
                        label: 'json参数',
                        value: 3
                    },
                    {
                        label: 'form-data参数',
                        value: 4
                    },
                    {
                        label: 'form-urlencoded参数',
                        value: 5
                    }
                ],
                infoTypeOptions: [
                    {
                        label: '常量参数',
                        value: 2
                    },
                    {
                        label: '一般参数',
                        value: 1
                    }
                ],
                infoParentOptions: [],
                infoNodeTypeOptions: [
                    {
                        label: 'int',
                        value: 1
                    },
                    {
                        label: 'string',
                        value: 2
                    },
                    {
                        label: 'boolean',
                        value: 3
                    },
                    {
                        label: 'jsonObject',
                        value: 4
                    },
                    {
                        label: 'jsonArray',
                        value: 5
                    }
                ],
                responseDataTypeOptions: [
                    {
                        label: 'json格式',
                        value: 1
                    },
                    {
                        label: 'xml格式',
                        value: 2
                    }
                ],
                importInfoTableData: [], // 接口入参表
                importInfoPage: null, // 接口入参表分页
                importInfoHeader: [
                    {
                        prop: 'orderNum',
                        label: '序号',
                        minWidth: 50,
                        align: 'center'
                    },
                    {
                        prop: 'paramFormat',
                        label: '参数格式',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'paramType',
                        label: '参数类型',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'paramKey',
                        label: '参数名',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'paramValue',
                        label: '参数值',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'nodeType',
                        label: '节点类型',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'parentOrderNum',
                        label: '父节点',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'paramName',
                        label: '参数含义',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 接口入参表头
                importInfoSlotColumns: ['paramType', 'paramFormat', 'nodeType', 'operation'],
                exportInfoTableData: [], // 接口出参表
                exportInfoPage: null, // 接口出参表分页
                exportInfoHeader: [
                    {
                        prop: 'orderNum',
                        label: '序号',
                        minWidth: 50,
                        align: 'center'
                    },
                    {
                        prop: 'paramKey',
                        label: '参数名',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'nodeType',
                        label: '节点类型',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'parentOrderNum',
                        label: '父节点',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'paramName',
                        label: '参数含义',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'responseDataType',
                        label: '数据类型',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 接口出参表头
                exportInfoSlotColumns: ['nodeType', 'responseDataType', 'operation'],
                currentEditInfo: null, // 当前选择的入参/出参行
                scriptConf: null, // 脚本配置信息
                scriptInfo: false, // 脚本配置弹窗是否显示
                scriptCur: null, // 脚本配置弹窗选中项
                scriptKey: '', // 脚本配置弹出框搜索key
                scriptList: [] // 脚本配置弹出框结果列表
            }
        },
        created() {
            // let lett = this
            // document.onkeydown = function (e) {
            //     let key = window.event.keyCode
            //     if (key === 13) {
            //         lett.pageData(1)
            //     }
            // }
        },
        mounted() {
            let _this = this
            // 左侧树滚动条样式初始赋值
            this.sidebarStyle = this.$method.getScrollbarStyle()
            // 添加左侧树滚动条对象
            this.$method.addScrollbar(_this)
            this.$http.get('/EsbInboundMain/selectSubServiceById', {
                id: 1,
                current: this.index || 1,
                size: 10
            }).then(result => {
                if (result.success) {
                    this.tableData = result.data.records
                    this.page = result.data
                    delete this.page['records']
                }
            })
        },
        methods: {
            // 目录树
            loadNode(node, resolve) {
                // let _this = this
                this.node_had = node
                this.resolve_had = resolve
                this.$http.get('/EsbServiceTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0
                }).then(result => {
                    this.data = result.data
                    let _this = this, arr = [], catalogueData = [], nodesData = []
                    setTimeout(() => {
                        _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                    }, 500)
                    for (let i = 0; i < result.data.length; i++) {
                        if (result.data[i].parId === 0) {
                            this.currentTreeInput = result.data[0].name
                        }
                        if (result.data[i].haschildren === 1) {
                            catalogueData.push(result.data[i])
                        } else {
                            nodesData.push(result.data[i])
                        }
                    }
                    arr = [...nodesData, ...catalogueData]
                    return resolve(arr)
                })
            },
            // 节点迁移树
            loadNode1(node, resolve) {
                // this.node_had = node
                // this.resolve_had = resolve
                this.$http.get('/EsbServiceTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)
                })
            },
            // 目录迁移树
            loadNode2(node, resolve) {
                // this.node_had = node
                // this.resolve_had = resolve
                this.$http.get('/EsbServiceTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)
                })
            },
            // 查询
            query() {
                this.$http.get('/EsbInboundMain/selectSubServiceById', {
                    id: this.currentTree.data.id,
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            // 保存系统信息修改
            updateSystemSave() {
                this.validate('upDateSysMsg', () => {
                    this.$http.get('/EsbInboundMain/update', {
                        serviceid: this.sysMsg.serviceid,
                        servname: this.sysMsg.servname,
                        servversion: this.sysMsg.servversion,
                        status: this.workingstaVal,
                        overTime: this.sysMsg.overTime
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.updateSystemFlag = false
                            this.loadNode(this.node_had, this.resolve_had)
                            this.$http.get('/EsbInboundMain/select', {
                                serviceid: this.sysMsgDet.serviceid
                            }).then(result => {
                                if (result.success) {
                                    // this.sysMsg = {...result.data}
                                    this.sysMsgDet = {...result.data}
                                    // this.sysMsgDet = {...this.sysMsg}
                                    this.workingstaVal = result.data.status
                                }
                            })
                        }
                    })

                })

            },
            // 新增当前目录下的数据
            addTree() {
                let subdirectory = this.ruleForm.name
                this.$http.get('/EsbServiceTree/insertSubId', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                    lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    name: subdirectory
                }).then(result => {
                    if (result.success) {
                        this.ruleForm.type = 1
                        this.visible = false
                        this.ruleForm.name = ''
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.refreshNodeBy(1)
                        this.loadNode(this.node_had, this.resolve_had)
                    }
                })
            },
            // 分页
            pageData(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/EsbInboundMain/selectSubServiceById', {
                    id: this.currentTree ? this.currentTree.data.id : '' || 0,
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            // 删除目录
            delTreeSer() {
                this.$confirm('确定要删除该目录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbServiceTree/delete', {
                        haschildren: this.currentTree.data.haschildren,
                        id: this.currentTree.data.id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.currentTreeInput = ''
                            this.serUpdate = false
                            this.loadNode(this.node_had, this.resolve_had)
                        }
                    })
                })
            },
            // 表单校验
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 新建系统
            addSystemSer() {
                // this.form.reset();
                // debugger
                this.validate('addForm', () => {
                    this.$http.get('/EsbServiceTree/insert', {
                        haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                        id: this.currentTree ? this.currentTree.data.id : '' || 1,
                        lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                        overTime: this.addForm.time,
                        servcode: this.addForm.code,
                        servname: this.addForm.name,
                        servversion: this.addForm.edition,
                        status: this.workingstatusVal
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            })
                            this.loadNode(this.node_had, this.resolve_had)
                            this.newSystem = false
                            this.addForm = {}
                            this.$http.get('/EsbInboundMain/selectSubServiceById', {
                                id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.data['records']
                                }
                            })
                        }
                    })
                })
            },
            // 修改当前目录名
            update1() {
                this.$http.get('/EsbServiceTree/updateName', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '',
                    id: this.currentTree ? this.currentTree.data.id : '',
                    name: this.currentTreeInput
                }).then(result => {
                    if (result.success) {
                        if (this.currentTreeInput !== this.inputbox) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.inputbox = this.currentTreeInput
                            this.loadNode(this.node_had, this.resolve_had)
                        } else {
                            this.$message({
                                type: 'info',
                                message: '目录名称未改变!'
                            })
                        }
                    }
                })
            },
            // 删除目录
            delTree() {
                this.$confirm('确定要删除该目录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbServiceTree/delete', {
                        haschildren: this.currentTree.data.haschildren,
                        id: this.currentTree.data.id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.loadNode(this.node_had, this.resolve_had)
                        }
                    })

                })
            },
            del() {
                this.$confirm('确定要删除该服务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbInboundMain/delete', {
                        serviceid: this.detailsId || this.currentTree.data.code
                    }).then(result => {
                        if (result.success) {
                            this.flag = false
                            this.proFlag = true
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.currentTreeInput = ''
                            this.loadNode(this.node_had, this.resolve_had)
                            this.$http.get('/EsbInboundMain/selectSubServiceById', {
                                id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.data['records']
                                }
                            })
                        }
                    })
                })
            },
            updateSystemClick() {
                this.updateSystemFlag = true
                this.sysMsg = {...this.sysMsgDet}
            },
            // 节点迁移
            migration(treeId) {
                this.nodeMigration = true
                this.$nextTick(() => {
                    this.id = treeId
                })
            },
            handleClick(row) {
                this.$nextTick(() => {
                    this.detailsId = row.serviceid
                })
                this.flag = true
                this.proFlag = false
                this.$http.get('/EsbInboundMain/select', {
                    serviceid: row.serviceid
                }).then(result => {
                    if (result.success) {
                        this.sysMsg = {...result.data}
                        this.sysMsgDet = {...result.data}
                        this.workingstaVal = result.data.status
                    }
                })
                // this.queryUserData() 查询服务的消费者信息 serviceid: row.serviceid
                this.$http.get('/EsbSystemService/select', {
                    current: this.userCurrentPage,
                    serviceid: row.serviceid,
                    size: this.userSize
                }).then(result => {
                    if (result.success) {
                        this.userTableData = result.data.records
                        this.userpage = result.data
                    }
                })
                // this.queryUserIPData() 查询用户IP授权信息 serviceid: row.serviceid
                this.$http.get('/EsbServiceConsumer/select', {
                    current: this.userIPCurrentPage,
                    serviceid: row.serviceid,
                    size: this.userIPSize,
                    ip: this.Ipinput
                }).then(result => {
                    if (result.success) {
                        this.userIPTableData = result.data.records
                        this.userIPpage = result.data
                    }
                })
            },
            // 当进入表格鼠标hover这一行的时候触发事件
            handClick(row) {
                this.$nextTick(() => {
                    this.detailsId = row.serviceid
                })
            },
            checkChange(data, node) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree = {
                    data,
                    node
                }
                this.currentTreeInput = this.currentTree.data.name
                this.inputbox = this.currentTree.data.name
                if (this.currentTree.node.data.id === 1) {
                    this.disinputBox = true
                    this.inputBox = false
                } else {
                    this.inputBox = true
                    this.disinputBox = false
                }
                if (this.currentTree.data.id === 1) {
                    this.directoryDeletion = false
                    this.serUpdate = false
                    this.directoryMigration = false
                } else {
                    this.directoryDeletion = true
                    this.serUpdate = true
                    this.directoryMigration = true
                }
                if (this.currentTree.data.haschildren === 0) {
                    this.proFlag = false
                    this.flag = true
                    this.$http.get('/EsbInboundMain/select', {
                        serviceid: this.currentTree.data.code
                    }).then(result => {
                        if (result.success) {
                            this.sysMsg = {...result.data}
                            this.sysMsgDet = {...result.data}
                            this.workingstaVal = result.data.status
                        }
                    })
                    this.detailsId = ''
                    this.queryUserData(1)
                    this.queryUserIPData(1)
                } else {
                    this.proFlag = true
                    this.flag = false
                    this.$http.get('/EsbInboundMain/selectSubServiceById', {
                        id: data.id || 0,
                        current: this.index || 1,
                        size: 10
                    }).then(result => {
                        if (result.success) {
                            this.tableData = result.data.records
                            this.page = result.data
                            delete this.data['records']
                        }
                    })
                }
                this.currentValue = '1'

                // this.accessDialogData()
                // this.deployDialog()
            },
            checkChange1(data, node) {
                let _this = this
                setTimeout(() => {
                    _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                }, 500)
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree1 = {
                    data,
                    node
                }
            },
            checkChange2(data, node) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree1 = {
                    data,
                    node
                }
            },
            // 弹框操作
            // 节点迁移保存
            save() {
                this.$http.get('/EsbServiceTree/migrate', {
                    id: this.id,
                    targetId: this.currentTree1 ? this.currentTree1.data.id : '',
                    targetLvl: this.currentTree1 ? this.currentTree1.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.nodeMigration = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        this.refreshNodeBy(1)
                        this.loadNode(this.node_had, this.resolve_had)
                        this.$http.get('/EsbInboundMain/selectSubServiceById', {
                            id: this.currentTree ? this.currentTree.data.id : '' || 0,
                            current: this.index || 1,
                            size: 10
                        }).then(result => {
                            if (result.success) {
                                this.tableData = result.data.records
                                this.page = result.data
                                delete this.data['records']
                            }
                        })
                    }
                })
            },
            // 目录迁移
            save1() {
                this.dirMigration = true
                this.$http.get('/EsbServiceTree/migrate', {
                    id: this.currentTree.data.id,
                    targetId: this.currentTree1 ? this.currentTree1.data.id : '',
                    targetLvl: this.currentTree1 ? this.currentTree1.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.dirMigration = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        // this.loadNode(this.node_had, this.resolve_had)
                        this.refreshNodeBy(1)
                    }
                })
            },
            refreshNodeBy(id) {
                let node = this.$refs.tree.getNode(id) // 通过节点id找到对应树节点对象
                node.loaded = false
                node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
            },
            // 服务消费者信息弹框
            consumersDialog() {
                this.consumers = true

                this.queryUserData()
                this.queryUserIPData()
            },
            addLoadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/EsbConsumerTree/listSubId', {
                        id: parentId || 0
                    }).then(result => {
                        if (result.success) {
                            if (callback) callback(result.data)
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (!item.label) item.label = item.abbreviation || item.name
                                })
                            }
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '添加失败!'
                        })
                    })
                }
            },
            // 添加服务的消费者信息弹框
            addUser() {
                this.addConsumers = true
                this.$nextTick(() => {
                    this.addConsumersModel = {
                        value: '',
                        label: ''
                    }
                })
            },
            addConsumersNodeClick(node, callback) {
                if (node.haschildren) return
                if (callback) callback()
            },
            // 保存添加服务的消费者信息
            saveAddConsumers() {
                if (this.addConsumersModel.label) {
                    this.$http.get('/EsbSystemService/insert', {
                        servcode: this.sysMsg.servcode,
                        serviceid: this.detailsId || this.currentTree.data.code || 0,
                        systemId: this.addConsumersModel.value || 0
                    }).then(result => {
                        this.queryUserData()
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            })
                            this.queryUserIPData()
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '添加失败!'
                        })
                    })
                    this.addConsumers = false
                } else {
                    this.$message({
                        type: 'info',
                        message: '内容不能为空!'
                    })
                }
            },
            // 修改服务的消费者信息
            modifyUser(row) {
                this.$http.get('/EsbSystemService/selectOne', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.userModifyTableData = result.data
                        this.userModifyTableData.maxclient = result.data.maxclient + ''
                    }
                })
                this.modifyConsumers = true
            },
            // 关闭服务的消费者信息弹框
            modifyCancel() {
                this.$refs.modifyFormRef.resetFields()
            },
            // 保存修改服务的消费者信息
            saveModifyConsumers() {
                this.$refs.modifyFormRef.validate((valid) => {
                    if (valid) {
                        this.$http.get('/EsbSystemService/update', {
                            id: this.userModifyTableData.id,
                            maxclient: this.userModifyTableData.maxclient,
                            reqFrequency: this.userModifyTableData.reqFrequency
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.queryUserData()
                                this.modifyConsumers = false
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '编辑失败!'
                            })
                        })
                    }
                })
            },
            // 删除服务的消费者信息
            deleteUser(row) {
                this.$confirm('确定要删除该目录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbSystemService/delete', {
                        id: row.id
                    }).then(result => {
                        this.queryUserData()
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.queryUserIPData()
                        }
                    })
                })
            },
            // 查询服务的消费者信息
            queryUserData(index) {
                if (index) this.userCurrentPage = index
                this.$http.get('/EsbSystemService/select', {
                    current: this.userCurrentPage,
                    serviceid: this.detailsId || this.currentTree.data.code,
                    size: this.userSize
                }).then(result => {
                    if (result.success) {
                        this.userTableData = result.data.records
                        this.userpage = result.data
                    }
                })
            },
            userCurrentChange(val) {
                this.userCurrentPage = val
                this.queryUserData()
            },
            // 关闭添加服务的消费者信息
            addConsumersClose() {
                this.addConsumers = false
            },
            // 关闭修改服务的消费者信息
            modifyConsumersClose() {
                this.modifyConsumers = false
            },
            // 查询用户IP授权信息
            queryUserIPData() {
                this.$http.get('/EsbServiceConsumer/select', {
                    current: this.userIPCurrentPage,
                    serviceid: this.detailsId || this.currentTree.data.code,
                    size: this.userIPSize,
                    ip: this.Ipinput
                }).then(result => {
                    if (result.success) {
                        this.userIPTableData = result.data.records
                        this.userIPpage = result.data
                    }
                })
            },
            // 用户IP授权
            authorization(row) {
                let state = row.status = 1
                this.$http.get('/EsbServiceConsumer/update', {
                    id: row.id,
                    status: state
                }).then(result => {
                    this.queryUserIPData()
                })
            },
            // 用户IP取消授权
            cancelAuthorization(row) {
                let state = row.status = 0
                this.$http.get('/EsbServiceConsumer/update', {
                    id: row.id,
                    status: state
                }).then(result => {
                    this.queryUserIPData()
                })
            },
            // 用户IP授权信息分页
            userIPCurrentChange(val) {
                this.userIPCurrentPage = val
                this.queryUserIPData()
            },
            // tab切换
            tabClick(val, tab) {
                if (val === '1') {
                    this.queryUserData()
                    this.queryUserIPData()
                } else if (val === '2') {
                    this.accessDialogData()
                } else if (val === '3') {
                    this.deployDialog()
                } else if (val === '4') {
                    this.getImportParam()
                    this.getExportParam()
                } else {
                    this.getScriptConf()
                }
                // this.tabsIndex = index
            },
            getScriptConf() {
                this.$http.get('/EsbScript/getScriptConf', {
                    id: this.sysMsgDet.serviceid
                }).then(result => {
                    if (result.success) {
                        this.scriptConf = result.data
                    }
                })
            },
            // 服务接入信息编辑弹框
            accessDialog() {
                this.access = true
                this.accessDialogData()

                if (this.webValue.endpoint) {
                    this.activeName = '2'
                } else if (this.H5Value.targetaddress) {
                    this.activeName = '3'
                } else {
                    this.activeName = '1'
                }
            },
            accessDialogData() {
                this.$http.get('/EsbInboundMain/selectRequestMethod', {
                    serviceid: this.detailsId || this.currentTree.data.code
                }).then(result => {
                    if (result.success) {
                        let data = result.data
                        // this.webValue = result.data
                        this.webValue.endpoint = data && data.datas ? data.datas.endpoint : ''
                        this.webValue.servicename = data && data.datas ? data.datas.servicename : ''
                        this.webValue.portname = data && data.datas ? data.datas.portname : ''
                        this.webValue.operationname = data && data.datas ? data.datas.operationname : ''

                        this.HTTPForm.type = (data && data.type) || ''
                        this.HTTPForm.typeValue = data && data.datas ? data.datas.httptype : ''
                        this.H5Value.targetaddress = data && data.datas ? data.datas.targetaddress : ''
                        this.H5Value.projectpath = data && data.datas ? data.datas.projectpath : ''
                        this.H5Value.returnValue = data && data.datas ? data.datas.tarType : ''
                    }
                })
            },
            // 切换表格
            changeTabs() {
                // this.accessDialog()
                this.$refs.HTTPFormRef.resetFields()
                this.$refs.webFormRef.resetFields()
                this.$refs.H5FormRef.resetFields()
            },
            // 保存服务接入信息接口
            saveBtn() {
                this.$http.get('/EsbInboundMain/insertRequestMethod', {
                    endpoint: this.webValue.endpoint,
                    httpType: this.HTTPForm.typeValue,
                    operationname: this.webValue.operationname,
                    portname: this.webValue.portname,
                    projectpath: this.H5Value.projectpath,
                    serviceid: this.detailsId || this.currentTree.data.code,
                    servicename: this.webValue.servicename,
                    tarType: this.H5Value.returnValue,
                    targetaddress: this.H5Value.targetaddress,
                    type: this.activeName
                }).then(result => {
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        })
                        this.accessDialogData()
                        this.access = false
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '保存失败'
                    })
                })
            },
            // 保存按钮
            saveAccess() {
                if (this.activeName === '1') {
                    this.$refs.HTTPFormRef.validate(valid => {
                        if (valid) {
                            this.saveBtn()
                        }
                    })
                } else if (this.activeName === '2') {
                    this.$refs.webFormRef.validate(valid => {
                        if (valid) {
                            this.saveBtn()
                        }
                    })
                } else if (this.activeName === '3') {
                    this.$refs.H5FormRef.validate(valid => {
                        if (valid) {
                            this.saveBtn()
                        }
                    })
                }
            },
            accessCancelTree() {
                this.$refs.HTTPFormRef.resetFields()
                this.$refs.webFormRef.resetFields()
                this.$refs.H5FormRef.resetFields()
                this.activeName = '1'
            },
            // 获取部署信息数据
            deployDialog() {
                this.$http.get('/EsbServiceAtomDeploy/select', {
                    serviceid: this.detailsId || this.currentTree.data.code,
                    deploytype: this.deploytype
                }).then(result => {
                    if (result.success) {
                        for (var i = 0; i < result.data.length; i++) {
                            if (result.data[i].status === '1') {
                                result.data[i].checked = true
                            } else {
                                result.data[i].checked = false
                            }
                            // 图片区域
                            if (result.data[i].appStatus === '1') {
                                result.data[i].deploySrc = '../../../static/images/use.png'
                            } else {
                                result.data[i].deploySrc = '../../../static/images/nouse.png'
                                result.data[i].disabled = true
                            }
                        }
                        this.deployData = result.data
                    }
                })

            },
            // 保存部署信息
            saveDeployment() {
                for (var i = 0; i < this.deployData.length; i++) {
                    if (this.deployData[i].checked === true) {
                        this.deployData[i].status = '1'
                    } else {
                        this.deployData[i].status = '0'
                    }
                }
                let map = {
                    deploytype: this.deploytype,
                    serviceid: this.detailsId || this.currentTree.data.code,
                    data: this.deployData
                }
                this.$http.post('/EsbServiceAtomDeploy/update', map).then(result => {
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        })
                        this.deployDialog()
                        this.deploy = false
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '保存失败'
                    })
                })
            },
            // 获取入参表格信息
            getImportParam(index) {
                this.$http.get('/EsbInboundParam/pageData', {
                    current: index || 1,
                    serviceId: this.detailsId || this.currentTree.data.code,
                    size: this.userSize,
                    paramMode: 1
                }).then(result => {
                    if (result.success) {
                        this.importInfoTableData = result.data.records
                        this.importInfoPage = result.data
                    }
                })
            },
            // 获取出参表格信息
            getExportParam(index) {
                this.$http.get('/EsbInboundParam/pageData', {
                    current: index || 1,
                    serviceId: this.detailsId || this.currentTree.data.code,
                    size: this.userSize,
                    paramMode: 2
                }).then(result => {
                    if (result.success) {
                        this.exportInfoTableData = result.data.records
                        this.exportInfoPage = result.data
                    }
                })
            },
            close(obj) {
                this.visible = false
                this.nodeMigration = false
                this.dirMigration = false
                this.proFlag = true
                this.flag = false
                this.consumers = false
                this.access = false
                this.deploy = false

            },
            addClose() {
                this.newSystem = false
                this.$refs.addForm.resetFields()
            },
            closeUpdateSystemDet() {
                this.updateSystemFlag = false
                this.$refs.upDateSysMsg.resetFields()
            },
            tabCurrentChangeDetails(currentRowDetails, oldCurrentRowDetails) {
                this.currentRowDetails = currentRowDetails
            },
            // 添加接口入参信息弹框
            addImportInfo(row) {
                this.editImportInfo = true
                this.infoParentOptions = []
                if (this.importInfoTableData.length > 0) {
                    this.infoParentOptions.push({
                        label: '',
                        value: ''
                    })
                    this.importInfoTableData.forEach((item, i) => {
                        if (row && row.id === item.id) return false
                        this.infoParentOptions.push({
                            label: item.orderNum,
                            value: item.orderNum
                        })
                    })
                }
                if (row) {
                    this.importInfoForm = {...this.importInfoForm, ...row}
                    this.$nextTick(() => {
                        this.$refs.importInfoForm.clearValidate()
                    })
                }
            },
            importInfoSave() {
                this.validate('importInfoForm', () => {
                    let params = {
                        paramFormat: this.importInfoForm.paramFormat, // 参数格式
                        paramKey: this.importInfoForm.paramKey, // 参数名
                        paramName: this.importInfoForm.paramName, // 参数含义
                        id: this.importInfoForm.id, // 参数id
                        serviceId: this.detailsId || this.currentTree.data.code, // 服务id
                        paramMode: 1, // 参数模式：入参
                        // orderNum: 1, // 参数序号
                        paramType: this.importInfoForm.paramType // 参数类型
                    }
                    if (this.importInfoForm.paramFormat === 3) {
                        params.parentOrderNum = this.importInfoForm.parentOrderNum
                        params.nodeType = this.importInfoForm.nodeType
                    }
                    if (this.importInfoForm.paramType === 2) {
                        params.paramValue = this.importInfoForm.paramValue
                    }
                    this.$http.post('/EsbInboundParam/save', params).then(result => {
                        if (result.success) {
                            this.getImportParam()
                            this.importInfoClose()
                        }
                    })
                })
            },
            importInfoClose() {
                this.editImportInfo = false
                this.currentEditInfo = null
                this.importInfoForm = {
                    nodeType: '', // 节点类型
                    paramFormat: '', // 参数格式
                    paramValue: '', // 参数值
                    paramKey: '', // 参数名
                    parentOrderNum: '', // 父节点
                    paramName: '', // 参数含义
                    paramType: 1 // 参数类型
                }
                this.$nextTick(() => {
                    this.$refs.importInfoForm.clearValidate()
                })
            },
            // 删除入参
            delImportInfo(row) {
                this.$confirm('确定要删除该参数吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/EsbInboundParam/delete', {
                        id: row.id,
                        paramMode: 1,
                        serviceId: this.detailsId || this.currentTree.data.code // 服务id
                    }).then(result => {
                        if (result.success) {
                            this.getImportParam()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    })
                }).catch(() => {
                })
            },
            // 添加接口出参信息弹框
            addExportInfo(row) {
                if (!row && !this.exportType) {
                    this.$message({
                        type: 'info',
                        message: '请先选择数据类型'
                    })
                } else {
                    this.editExportInfo = true
                    this.infoParentOptions = []
                    if (this.exportInfoTableData.length > 0) {
                        this.infoParentOptions.push({
                            label: '',
                            value: ''
                        })
                        this.exportInfoTableData.forEach((item, i) => {
                            if (row && row.id === item.id) return false
                            this.infoParentOptions.push({
                                label: item.orderNum,
                                value: item.orderNum
                            })
                        })
                    }
                    if (row) {
                        this.exportInfoForm = {...this.exportInfoForm, ...row}
                        this.$nextTick(() => {
                            this.$refs.exportInfoForm.clearValidate()
                        })
                    }
                }
            },
            exportInfoSave() {
                this.validate('exportInfoForm', () => {
                    let params = {
                        paramKey: this.exportInfoForm.paramKey, // 参数名
                        paramName: this.exportInfoForm.paramName, // 参数含义
                        id: this.exportInfoForm.id, // 参数id
                        serviceId: this.detailsId || this.currentTree.data.code, // 服务id
                        paramMode: 2, // 参数模式：入参
                        // orderNum: 1, // 参数序号
                        parentOrderNum: this.exportInfoForm.parentOrderNum, // 父节点
                        nodeType: this.exportInfoForm.nodeType, // 节点类型
                        responseDataType: this.exportType // 返回数据类型
                    }
                    this.$http.post('/EsbInboundParam/save', params).then(result => {
                        if (result.success) {
                            this.getExportParam()
                            this.exportInfoClose()
                        }
                    })
                })
            },
            exportInfoClose() {
                this.editExportInfo = false
                this.currentEditInfo = null
                this.exportInfoForm = {
                    nodeType: '', // 节点类型
                    paramKey: '', // 参数名
                    parentOrderNum: '', // 父节点
                    paramName: '' // 参数含义
                }
                this.$nextTick(() => {
                    this.$refs.exportInfoForm.clearValidate()
                })
            },
            // 删除出参
            delExportInfo(row) {
                this.$confirm('确定要删除该参数吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/EsbInboundParam/delete', {
                        id: row.id,
                        paramMode: 2,
                        serviceId: this.detailsId || this.currentTree.data.code // 服务id
                    }).then(result => {
                        if (result.success) {
                            this.getExportParam()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    })
                }).catch(() => {
                })
            },
            responseDataTypeDisable(item) {
                if (this.exportInfoTableData[0]) {
                    let type = this.exportInfoTableData[0].responseDataType
                    if (item.value !== type) return true
                }
            },
            // 脚本配置编辑弹框
            scriptDialog() {
                this.scriptInfo = true
                this.getScriptList(this.scriptConf && this.scriptConf.id)
            },
            getScriptList(id) {
                this.$http.get('/EsbScript/pageData', {
                    name: this.scriptKey,
                    size: 10000
                }).then(result => {
                    if (result.success) {
                        let list = result.data.records
                        if (list.length > 0) {
                            list.map(e => {
                                e.checked = false
                                if (id && id === e.id) e.checked = true
                            })
                        }
                        this.scriptList = JSON.parse(JSON.stringify(list))
                    }
                })
            },
            scriptChange(item, invert) {
                if (item.checked || invert) {
                    this.scriptList.map(e => {
                        e.checked = false
                    })
                    item.checked = true
                    this.scriptCur = item
                } else {
                    this.scriptCur = null
                }
            },
            scriptClick(item) {
                if (item.checked) {
                    item.checked = false
                    this.scriptCur = null
                } else {
                    this.scriptChange(item, true)
                }
            },
            scriptSave() {
                let _this = this
                if (!this.scriptCur) {
                    this.$confirm('未选择脚本，继续操作将删除原有脚本配置', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        save()
                    }).catch(() => {
                    })
                } else {
                    save()
                }

                function save() {
                    _this.$http.get('/EsbScript/saveScriptConf', {
                        scriptId: (_this.scriptCur && _this.scriptCur.id) || '',
                        serviceId: _this.sysMsgDet.serviceid
                    }).then(result => {
                        if (result.success) {
                            _this.$message({
                                type: 'success',
                                message: '保存成功!'
                            })
                            _this.getScriptConf()
                            _this.scriptClose()
                        }
                    })
                }
            },
            scriptClose() {
                this.scriptInfo = false
                this.scriptKey = ''
                this.scriptList = []
                this.scriptCur = null
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            selectTree,
            scrollBar,
            tabsBar
        },
        beforeDestroy() {
            let _this = this
            this.$method.removeScrollbar(_this)
        }
    }
</script>
<style scoped lang="less">
    .serviceContent {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        width: 3.6rem;
    }

    .message {
        min-height: calc(100% - 1.6rem);
    }

    .serviceContent {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        width: 3rem;
    }

    .sysDet {
        margin-top: .4rem;
    }

    .sysMsg {
        font-size: .16rem;
        min-height: .4rem;
        /*line-height: .4rem;*/
        border-bottom: .01rem solid #E1E1E1;
        margin-bottom: .3rem;
        margin-right: .5rem;

        .sysTitle {
            /*display: inline-block;*/
            /*float: left;*/
            color: #999;
            margin-right: .2rem;
            width: 1.2rem;
            vertical-align: top;
        }

        .sysContenrt {
            /*float: left;*/
            width: 3rem;
            overflow-wrap: break-word;
            display: inline-block;
            vertical-align: text-top;
            /*display: inline-block;*/
        }
    }

    .el-link {
        font-size: .14rem;
    }

    .catalogue {
        font-size: .16rem;
    }

    .second {
        margin: 0 0.1rem;
        /* position: relative; */
        border-left: 0.01rem solid #ccc;
        border-right: 0.01rem solid #ccc;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        height: 0.15rem;
        line-height: 0.15rem;
    }

    .tree {
        height: 2.5rem;
        overflow-y: auto;
    }

    .tree1 {
        padding: .2rem;
    }

    .file {
        color: #FFCA28;
    }

    .sys {
        color: #5586FB;
    }

    .current {
        span {
            float: left;
            line-height: .4rem;
        }

        .el-input {
            float: left;
            width: 3rem;
            font-size: .16rem;
            color: #5586FB;
        }

        .el-button {
            margin-left: .3rem;
        }
    }

    .el-dialog--center .el-dialog__body {
        padding: 0.35rem 0.45rem 0;
    }

    .el-button--primary {
        background-color: #5586FB;
    }

    .el-button--danger {
        background-color: #F53535;
    }

    .system-details {
        height: 3.5rem;

        .el-form {
            width: 70%;
            margin-top: .5rem;

            .btn {
                margin-left: 30%;
            }
        }
    }

    .toolbar {
        font-size: 0.16rem;

        .current {
            > span {
                color: #999;
            }
        }
    }

    .serMsg {
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: -0.3rem;
        // margin-left: -0.1rem;
    }

    .el-row {
        margin-left: -0.2rem;
    }

    .ib {
        float: left;
    }

    .HTTPSelect {
        margin: 1.2rem auto;
    }

    .WEBSelect {
        margin-top: 0.2rem;
    }

    .H5Select {
        margin-top: 0.4rem;
    }

    .consumers {
        /*height: 8rem;*/
        padding: 0.2rem;
        margin: 0.2rem;
        border: 1px #ccc solid;
        border-radius: 1%;
    }

    .box_shadow {
        box-shadow: none;
    }

    .serviceType {
        margin-bottom: 0.2rem;
    }

    .tabsHeight {
        /*min-height: 4.15rem;*/

        .ml60 {
            margin-left: 0.6rem;
        }

        .mb40 {
            margin-bottom: 0.4rem;
        }

        .tableWidth {
            margin: 0.2rem 0.1rem;

            .w50 {
                width: 50%;
            }

            .ml40 {
                margin-left: 0.4rem;
            }
        }

        .positionR {
            position: relative;

            .add {
                position: absolute;
                top: -.125rem;
                right: 0.3rem;
                height: .4rem;
            }

            .addInput {
                position: absolute;
                top: -0.1rem;
                right: 0.3rem;

                .el-input {
                    font-size: .16rem;
                    color: #5586FB;
                }

                .el-button {
                    padding-left: 0;
                    margin-left: 0;
                }
            }

            .breadcrumb {
                height: 0.15rem;
                margin: 0.3rem 0 0.2rem 0.2rem;
                padding-left: 0.1rem;
                border-left: 0.02rem solid #5586FB;
            }

            .breadcrumbB {
                margin-bottom: 0.3rem;
            }

            .breadcrumbT {
                margin-top: 0.5rem;
                margin-bottom: .3rem;
            }
        }

        .demonstration {
            font-size: 0.16rem;
        }
    }

    .el-button--default {
        border-color: #EFEFEF;
        background-color: transparent;
        outline: none;
        color: #5586FB;
        font-size: .18rem;

        /*&:hover, &:focus, &:active {*/
        /*    outline: none;*/
        /*    background-color: transparent;*/
        /*    border-color: transparent;*/
        /*}*/
    }

    .script-info {
        .search {
            position: relative;
            padding-bottom: .1rem;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: -25px;
                width: calc(100% + 50px);
                height: 1px;
                background-color: #eee;
            }

            .el-input {
                width: 80%;
            }

            .el-button {
                width: 15%;
                margin-left: 3%;
            }
        }

        .list {
            min-height: 100px;
            max-height: 2rem;
            overflow: auto;

            > div {
                display: block;
                line-height: .3rem;
                cursor: pointer;
                padding: 0 .1rem;

                .icon {
                    float: right;
                    margin-left: .1rem;

                    i {
                        font-size: .14rem;
                        color: #3489f2;
                    }
                }

                &:hover {
                    background-color: #f7f7f7;
                }

                &.active {
                    background-color: #f7f7f7;
                }
            }

            .el-checkbox {
                margin-right: .05rem;
            }
        }

        .empty {
            height: 100px;
            line-height: 100px;
            color: #999;
            text-align: center;
        }
    }
</style>
